<template>
  <div
    :class="[active_type_border, css_content_padding, css_wind_light_hover]"
    :id="active_type_border"
  >
    <div
      :class="[title_active_type, css_title_world_gray]"
      :id="title_active_type"
    >
      {{ placeholder_active_type }}
    </div>
    <div :class="active_type_view_container" :id="active_type_view_container">
      <uni_type
        v-for="cur_uni_type in ref_active_type_info"
        :key="cur_uni_type.id"
        :id="cur_uni_type.id"
        :cur_uni_type_id="get_full_id_active_uni_type(cur_uni_type.id)"
        :val="cur_uni_type.val"
        :active="cur_uni_type.active"
      ></uni_type>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

import uni_type from '../uni_type/uni_type.vue';

import './active_type.css';
import { init_active_type } from './active_type';
import {
  css_content_padding,
  css_title_world_gray,
  css_wind_light_hover,
} from '../../../../../global_comps/Css';
import {
  active_type_border,
  active_type_view_container,
  placeholder_active_type,
  title_active_type,
} from './DataDefine/sourceData';

let cur_active_type_props = defineProps({});

import { get_full_id_active_uni_type } from './Func/get_full_id_active_uni_type';
import { ref_active_type_info } from './Func/ref_active_type_info';

onMounted(() => {
  init_active_type();
});
</script>
